<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>
<%@ taglib prefix ="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<%@ include file="/common/common-css.jsp" %>
		<style>
		#jquery-table td{cursor:pointer !important}
		.load_bg{background:#000;opacity:0.1;left:0px;top:0px;position:fixed;height:100%;width:100%;overflow:hidden;z-index:10000;}
		.load_img{left:50%;top:180px;position:fixed;height:50px;overflow:hidden;z-index:20000;}
		</style>
	</head>
<body  class="no-skin">
<div  class="load_bg" style="display:none;" ></div>
<img src="http://img.xmiles.cn/commentloading.gif" class="load_img" style="display:none"/>
<div class="page-content">
<div id="test"></div>
			<div class="page-header" style="margin-bottom:0px;padding-bottom:10px;">
			
				<h1 id="fu_name">
					
				</h1>
			</div>
	<form id="queryForm" >
	<div class="page-content-area">
		<div class="row">
			<div class="col-sm-12">
				<div class="widget-box" style="border:0px solid #ccc; border-top:none;border-bottom:none;">
					<div class="widget-header widget-header-blue widget-header-flat">
						<h4 class="widget-title">选择条件进行查询</h4>

						<div class="widget-toolbar">
							<a href="#" data-action="collapse">
								<i class="ace-icon fa fa-chevron-up"></i>
							</a>
						</div>
					</div>

					<div class=" widget-body">
						<!-- <div class="widget-main" style="padding:12px;border:0px solid #ccc; border-top:none;border-bottom:none;"> -->
						<div class="widget-main" >
										<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
											<label class="col-sm-4 control-label"  style="text-align:right"  for="sex">时间:</label>
											<div class="col-sm-8">
												<div class="input-daterange input-group">
													<input type="text" data-date-format="yyyy-mm-dd hh:ii" class="fromDate date-picker input-sm form-control" style="padding-left:0px" name="fromDate">
													<span class="input-group-addon" style="width:6px">
														<i class="fa fa-exchange"></i>
													</span>
													<input type="text" data-date-format="yyyy-mm-dd hh:ii" class="endDate date-picker input-sm form-control" style="padding-left:0px" name="endDate">
												</div>
											</div>
										</div>

										<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
											<label class="col-sm-4 control-label"  style="text-align:right"  for="sex">平台:</label>
											<select class="col-sm-6" name="platform" id="platform">
											  <option value="">-请选择-</option>
											  <option value="android">android</option>
                                              <option value="ios">ios</option>
											</select>
										</div>
										<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
											<label class="col-sm-4 control-label"  style="text-align:right"  for="channel">渠道:</label>
											<select class="col-sm-6" name="channel" id="channel">
											  <option value="">-请选择-</option>
											</select>
										</div>
										<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
											<label class="col-sm-4 control-label"  style="text-align:right"  for="sex">版本:</label>
											<select class="col-sm-6" name="versionname" id="versionname">
											  <option value="">-请选择-</option>
											</select>
										</div>
										
										<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
											<label class="col-sm-4 control-label" style="text-align:right" for="form-field-select-1">省份:</label>
											<div class="col-sm-6">
												<s:select name="province" list="%{provinceList}" listKey="id" listValue="name" headerKey="" headerValue="--请选择--" cssClass="form-control col-sm-6" value="%{paramsMap.province}"></s:select>
											</div>
										</div>
					
										<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
											<label class="col-sm-4 control-label" style="text-align:right" for="form-field-select-1">城市:</label>
											<s:select name="cityid" list="%{cityList}" listKey="id" listValue="name" headerKey="" headerValue="--请选择--" cssClass="col-sm-6" value="%{paramsMap.city}"></s:select>
										</div>
							</div><!-- /.widget-main -->
					</div><!-- /.widget-body -->
				</div><!-- /.widget-box -->
			</div><!-- /.col-sm-12 -->
				<div class="col-md-12 center">
				<div class="clearfix form-actions">
				
					<button class="btn btn-purple  no-border" type="button" name="btn-query" onclick="query_any()" id="btn-query">
						<i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
						查询
					</button>
					&nbsp;&nbsp;&nbsp;
					<button class="btn btn-grey  no-border" type="reset">
						<i class="ace-icon fa fa-undo icon-on-right bigger-110"></i>
						重置
					</button>
					
				  </div>
		   </div>
		</div><!-- /.row -->
				 
		<!--highcharts -->		 
		<div class="row" style="margin-bottom:20px;">
			<div id="highcharts-container" class="col-xs-12"></div>
		</div>	

		<div class="row">
			<div class="col-xs-12">
				<table id="jquery-table201" class="table table-striped table-bordered table-hover">			
				</table>
			</div>
		</div>
	</div><!-- /.page-content-area -->
	
	</form>
</div><!-- /.page-content -->

<%@ include file="/common/common-js.jsp" %>
<%@ include file="/common/highcharts.jsp" %>
<script type="text/javascript" src="${ctx}/js/call_func.js"></script>
<script type="text/javascript" src="${ctx}/statistics/homepage/comm.js"></script>
<!-- inline scripts related to this page -->
<script type="text/javascript">
var requesturl = "http://xmiles.cn/stat_service/common";
//var requesturl = "http://localhost:8080/stat_service/common";
var platform = '';
 //【查询】按钮Click事件
	  function query_any(){
	  
  		platform = $('#platform').val();
	  	var statisticstype = $('#statisticstype').val();
	  	
	    	loaddata(statisticstype);
			$("#checkAll").on("change", function () {
				if($("#checkAll").prop("checked")==true){
					$('input[name = "id"]:checkbox').prop("checked", true);
				}
				else{
					$('input[name = "id"]:checkbox').prop("checked", false);
				}	
		});
	    	
	  }
	  
function getQueryString(name) {
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
 	var r = window.location.search.substr(1).match(reg);
	if (r != null) return decodeURI(r[2]); return null;
	
}
	 

window.onload=function(){
	  var searchType = getQueryString("searchType");
	  var interface_id = getQueryString("interface_id");
	  $.ajax({
		"type": "POST",
		"dataType":"json",
		"url": requesturl,
		"data": '{"data":{"databean":{"interface_id":"219"}},"shandle":"0","handle":"0"}',
		"success": function(resp){
			console.log(resp);
			//插入搜索项中的渠道下拉选项内容
			$.each(resp.ChannelList,function(index,item){
				$('select#channel').append('<option value='+item.id+'>'+item.name+'<\/option>');
			});
			//插入搜索项中的版本下拉选项内容
			$.each(resp.versionList,function(index,item){
				$('select#versionname').append('<option value='+item+'>'+item+'<\/option>');
			});
		},		
		"error": function(XMLHttpRequest, textStatus, errorThrown) {
           alert('error');	
		},
	 });
 	 loaddata(searchType,interface_id);
};

var jqTable201 = null;

var loaddata = function(searchType,interface_id){
	$('.load_bg,.load_img').show();
	jQuery(function($) {
	  $('.dataTables_wrapper').css('display', 'none');
      //详情统计
      if (jqTable201 != null) {
  	  $('#jquery-table201_wrapper').css('display','block');
  	  jqTable201.fnDraw();
  	  		return;
  	  		}
        	jqTable201 = $('#jquery-table201').dataTable( {
        		"columnDefs": [
  		    	
  		    	{
  		    		  "title":"日期",
  		    		  "name":"name",
  		    		  "data": "name",
  		    	  	  "targets": [0], 
  		    	  	  "bSortable": false,
   		    	  	  "width": "20%"
  		    	},
  		    	{
  		    		  "title":"UV",
  		    		  "name":"UV",
  		    		  "data": "UV",
  		    	  	  "targets": [1], 
  		    	  	  "bSortable": false,
   		    	  	  "width": "10%"
  		    	},
  		    	 {
  		    	 	  "title":"PV",
  		    	 	  "name":"PV",
  		    	 	  "data": "PV",
  		    	  	  "targets": [2],
  		    	 	  "bSortable": false,
   		    	 	  "width": "10%",
  		    	}
  		    	 
  		  	],
  			"sAjaxSource": requesturl,
  			"fnServerData": function ( sSource, aoData, fnCallback ) {//从服务器请求数据
  		   			var data = $('#queryForm').serializeObject();
  		   			aoData = JSON.stringify(aoData).replace(new RegExp("\/\/","gm"),"");
  		   			aoData = JSON.parse(aoData);
  		   			data.aoData = aoData;
  					var test =  JSON.stringify(data);
  					test = test.slice(1,test.length);
  					var fromDate = $('.fromDate').val();
  					var endDate = $('.endDate').val();
  					var databean;
  					$.ajax({
  						"type": "POST",
  						"dataType": 'json',
  						"url": sSource,
  						"data": '{"data":{"databean":{"interface_id":"'+ interface_id +'","type":"'+ searchType + '",' + test +'},"shandle":"0","handle":"0"}',
  						"success": function(resp){
  						   console.log(resp);
  							fnCallback(resp);
  							initListPage();
  							
  							//加载highcharts
							var categories = new Array(),
								series1 = new Array(),
								series2 = new Array();
						
							$.each(resp.aaData,function(index,item){
								categories.push(item.name);
								series1.push(item.UV);
								series2.push(item.PV);

							});
							var series = [
									      {
									         name: 'UV',
									         data: series1.reverse()
									      },
									      {
									         name: 'PV',
									         data: series2.reverse()
									      }
									    ];
							getHighcharts('#highcharts-container', '统计', '走势', categories.reverse(), '数量', series);
  							
  						},		
  						"error": function(XMLHttpRequest, textStatus, errorThrown) {
  						    
  						},
					    complete:function(){
						    $('.load_bg,.load_img').hide();
						}  										
  				  });
                    $.ajaxSetup({ 
                        xhrFields: { withCredentials: false }, 
                        crossDomain: true 
                    });
  			},
  			"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
  				
  			},
  			"sScrollXInner": "100%",
  			"bRetrieve": true,
  			"sScrollY": "100%",//如果不设置，IE会有问题
  		    "aaSorting": [[1,"desc"]] 
        	});
	});
}
	
	jQuery(function(){
		
		//省份联动城市的变动
	    $("#province").bind("change", function () { 
			var select_province = $(this).val();
	    	var citys = $("#cityid");
	    	citys.empty();
	        $.getJSON(ctx + "/life/region/getCityByProvinceid.action", {provinceid : select_province}, function (returnObj) {
	           for (var i=0;i<returnObj.citys.length; i++) {
	        	   	var city = returnObj.citys[i];
	        	   	citys.append("<option value='" + city.id + "'>" + city.name + "</option>");
	    	   }
	        });
		});
		
		//省份联动城市的变动
	    $("#carProvince").bind("change", function () { 
			var select_province = $(this).val();
	    	var citys = $("#carCity");
	    	citys.empty();
	        $.getJSON(ctx + "/life/region/getCityByProvinceid.action", {provinceid : select_province}, function (returnObj) {
	           for (var i=0;i<returnObj.citys.length; i++) {
	        	   	var city = returnObj.citys[i];
	        	   	citys.append("<option value='" + city.id + "'>" + city.name + "</option>");
	    	   }
	        });
		});
	
	});
	
</script>
		
</body>
</html>
